import './style.scss'
import logo from '@/static/img/logo_@2x.png'
import slogn_word_icon from '@/static/img/slogn_word_icon_@2x.png'
import {useCallback, useEffect, useRef} from "react";
import {useNavigate} from "react-router-dom";

const useRefAnimation = () => {
    const ref = useRef<HTMLDivElement>(null!)

    useEffect(() => {
        ref.current.style.opacity = '1'
    })
    return ref
}

function Guide() {
    const navigate = useNavigate()
    const ref = useRefAnimation()
    const handleIconClick = useCallback(() => {
        if (localStorage.getItem('token')) {
            navigate('/home')
        } else {
            navigate('/account/login')
        }
    }, [navigate])

    return (
        <>
            <div ref={ref} className="page guize-page">
                <img src={logo} alt="欢乐购" className="main-pic"/>
                <p className='title'>欢乐购</p>
                <img src={slogn_word_icon} alt="欢乐购" className="sub-pic"/>
                <div className="iconfont arrow-icon" onClick={handleIconClick}>
                    &#xe60c;
                </div>
            </div>
        </>
    )
}

export default Guide
